<route type="page" lang="json">
{
  "style": {
    "navigationBarTitleText": "类目就业分析",
    "navigationStyle": "custom"
  }
}
</route>
<template>
  <view class="category-analysis">
    <view class="fixed-bg"></view>
    <view class="category-analysis__header">
      <c-title
        :title="detailInfo.name"
        :subtitle="`专业：${majorList.map((el) => el.name).join('、')}`"
      ></c-title>

      <image class="img" src="@/pages-sub/static/analysis.png" mode="scaleToFill" />
    </view>
    <view class="category-analysis__main">
      <view class="category-analysis__main--tab">
        <view
          v-for="(item, index) in tabs"
          :key="index"
          :class="{ active: currentTab === item.value }"
          @click="currentTab = item.value"
          >{{ item.title }}</view
        >
      </view>
      <view class="category-analysis__main--content">
        <c-parse
          :content="
            currentTab === 1 ? detailInfo.counterpartEnterprises : detailInfo.correspondingPositions
          "
        />
        <!-- <view class="type">
          <view class="type--title">
            <image src="@/pages-sub/static/party.png" mode="scaleToFill" />
            <text>央国企</text>
          </view>
          <view class="type--content">
            <label>中国人寿保险股份有限公司：</label>
            <view
              >作为国内寿险行业的龙头企业，需要历史学类专业的毕业生从事教育培训类、人力资源与综合行政类等岗位工作。这些岗位可能涉及到企业文化建设、员工培训中的历史文化教育、企业历史资料整理与研究等方面的工作。</view
            >
          </view>
        </view>
        <view class="type">
          <view class="type--title">
            <image src="@/pages-sub/static/state-own.png" mode="scaleToFill" />
            <text>地方国企</text>
          </view>
          <view class="type--content">
            <label>中国人寿保险股份有限公司：</label>
            <view
              >作为国内寿险行业的龙头企业，需要历史学类专业的毕业生从事教育培训类、人力资源与综合行政类等岗位工作。这些岗位可能涉及到企业文化建设、员工培训中的历史文化教育、企业历史资料整理与研究等方面的工作。</view
            >
          </view>
        </view>
        <view class="type">
          <view class="type--title">
            <image src="@/pages-sub/static/private-enterprise.png" mode="scaleToFill" />
            <text>大厂私企</text>
          </view>
          <view class="type--content">
            <label>中国人寿保险股份有限公司：</label>
            <view
              >作为国内寿险行业的龙头企业，需要历史学类专业的毕业生从事教育培训类、人力资源与综合行政类等岗位工作。这些岗位可能涉及到企业文化建设、员工培训中的历史文化教育、企业历史资料整理与研究等方面的工作。</view
            >
          </view>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ApiGetMajorDetail, ApiGetThreeMajorList } from '@/service/major';

  import { ref } from 'vue';
  const tabs = [
    {
      title: '对口企业参考',
      value: 1,
    },
    {
      title: '对口岗位参考',
      value: 2,
    },
  ];
  const currentTab = ref(1);
  const detailInfo = ref<{
    name?: string;
    id?: number;
    counterpartEnterprises?: string;
    correspondingPositions?: string;
  }>({});
  const majorList = ref<{ name?: string; id?: number }[]>([]);

  onLoad(async ({ params }) => {
    if (params) {
      params = JSON.parse(params);
      const { data } = await ApiGetMajorDetail({ id: params.id });
      detailInfo.value = data;
      ApiGetThreeMajorList({ pid: params.id }).then(({ data }) => {
        majorList.value = data as any[];
      });
    }
  });
</script>

<style lang="scss" scoped>
  .category-analysis {
    height: calc(100% - 100rpx);
    padding: 32rpx 32rpx 68rpx;

    .fixed-bg {
      background: linear-gradient(180deg, #ffdbc6 0%, #fbe1d1 27%, #fff3ec 100%);
    }
    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .img {
        flex-shrink: 0;
        width: 144rpx;
        height: 164rpx;
        margin-left: 68rpx;
      }
    }
    &__main {
      margin-top: 40rpx;
      background: #fff;
      border-radius: 20rpx;
      min-height: calc(100% - 200rpx);
      &--tab {
        display: flex;
        view {
          flex: 1 0 0;
          text-align: center;
          background: #fef7f2;
          border-radius: 20rpx 20rpx 0rpx 0rpx;
          color: $uni-color-subtitle;
          font-size: 28rpx;
          padding: 28rpx 0;
          &:first-child {
            border-top-right-radius: 0rpx;
            border-bottom-right-radius: 30rpx;
          }
          &:last-child {
            border-top-left-radius: 0rpx;
            border-bottom-left-radius: 30rpx;
          }
          &.active {
            background: #fff;
            border-radius: 20rpx;
            position: relative;
            top: -10rpx;
            color: $uni-color-primary;
            font-size: 30rpx;
            font-weight: 600;
            box-shadow: 0rpx -7rpx -8rpx 10rpx rgba(112, 49, 23, 0.12);

            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
              width: 40rpx;
              height: 6rpx;
              background: $uni-color-primary;
            }
          }
        }
      }

      &--content {
        padding: 28rpx;
        .type {
          &--title {
            background: linear-gradient(
              270deg,
              rgba(255, 128, 14, 0) 0%,
              rgba(255, 128, 14, 0.16) 100%
            );
            border-radius: 8rpx 0rpx 0rpx 8rpx;
            font-weight: 600;
            color: $uni-color-title;
            padding: 14rpx 20rpx;
            display: flex;
            align-items: center;
            gap: 12rpx;
            font-size: 30rpx;
            image {
              width: 36rpx;
              height: 36rpx;
            }
          }
          &--content {
            padding: 24rpx 20rpx;
            color: $uni-color-title;
            font-size: 26rpx;
            label {
              font-weight: 600;
            }

            view {
              opacity: 0.5;
              margin-top: 8rpx;
            }
          }
        }
      }
    }
  }
</style>
